<template>
	<view class="base-bar">
		<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-button" :plain="true">
			<image :src="residentData.avatar
				" mode=""></image>
		</button>
		<view class="message-bar">
			<view class="message-item">
				<view class="message-title">真实姓名</view>
				<view class="messageInfo">{{residentData?.name}}<text class="fix">*</text></view>
			</view>
			<view class="message-item">
				<view class="message-title">身份证号</view>
				<view class="messageInfo">{{residentData?.IDnumber}}<text class="fix">*</text></view>
			</view>
			<view class="message-item">
				<view class="message-title">联系电话</view>
				<view class="messageInfo" style="color:#2984F8">{{residentData?.phone}}<text class="fix">*</text></view>
			</view>
			<view class="message-item">
				<view class="message-title">现居地址</view>
				<input type="text" placeholder="请输入现居地址" placeholder-style="font-size:28rpx;color:#dbdbdb"
					v-model="residentData.address" />
			</view>
			<view class="message-item">
				<view class="message-title">户籍地址</view>
				<view class="messageInfo">{{residentData?.origin}}<text class="fix">*</text></view>
			</view>
			<view class="message-item">
				<view class="message-title">行政区划</view>
				<view class="messageInfo">{{residentData?.administrativeRegion}}<text class="fix">*</text></view>
			</view>
		</view>

		<view class="message-bar">
			<view class="message-item">
				<view class="message-title">性别</view>
				<view class="messageInfo">{{residentData?.gender?'男':'女'}}<text class="fix">*</text></view>
			</view>
			<view class="message-item">
				<view class="message-title">出生日期</view>
				<view class="messageInfo">{{residentData?.birthday}}<text class="fix">*</text></view>
			</view>
			<view class="message-item">
				<view class="message-title">籍贯</view>
				<input type="text" placeholder="请输入籍贯" placeholder-style="font-size:28rpx;color:#dbdbdb"
					v-model="residentData.origin" />
			</view>
			<view class="message-item">
				<view class="message-title">民族</view>
				<view @click="openNation"
					style="height: 88rpx;display: flex;justify-content: space-between;width: 558rpx;font-size: 28rpx;color:#dbdbdb;align-items: center;">
					<view class="messageInfo" v-if="residentData.nation">{{residentData.nation}}
					</view>
					<view class="messageInfo " style="color: #dbdbdb;" v-else>请选择您的民族</view>
					<image src="/static/icons/jiantou.png" mode=""
						style="width: 18rpx;height: 28rpx;margin: 0;margin-right: 32rpx;">
					</image>
				</view>
			</view>
			<view class="message-item">
				<view class="message-title">文化程度</view>
				<view @click="openCulture"
					style="height: 88rpx;display: flex;justify-content: space-between;width: 558rpx;font-size: 28rpx;color:#dbdbdb;align-items: center;">
					<view class="messageInfo" v-if="residentData.culture">{{residentData.culture}}
					</view>
					<view class="messageInfo" style="color: #dbdbdb;" v-else>请选择您的文化程度</view>
					<image src="/static/icons/jiantou.png" mode=""
						style="width: 18rpx;height: 28rpx;margin: 0;margin-right: 32rpx;">
					</image>
				</view>
			</view>
			<view class="message-item">
				<view class="message-title">婚姻状况</view>
				<view @click="openMarry"
					style="height: 88rpx;display: flex;justify-content: space-between;width: 558rpx;font-size: 28rpx;color:#dbdbdb;align-items: center;">
					<view class="messageInfo" v-if="residentData.maritalStatus">
						{{residentData.maritalStatus}}
					</view>
					<view class="messageInfo" style="color: #dbdbdb;" v-else>请选择您的婚姻状况</view>
					<image src="/static/icons/jiantou.png" mode=""
						style="width: 18rpx;height: 28rpx;margin: 0;margin-right: 32rpx;">
					</image>
				</view>
			</view>
			<view class="message-item">
				<view class="message-title">职业</view>
				<input type="text" placeholder="请输入您的职业" placeholder-style="font-size:28rpx;color:#dbdbdb"
					v-model="residentData.profession" />
			</view>
			<view class="message-item">
				<view class="message-title">工作单位</view>
				<input type="text" placeholder="请输入工作单位" placeholder-style="font-size:28rpx;color:#dbdbdb"
					v-model="residentData.workUnit" />
			</view>
			<view class="message-item">
				<view class="message-title">紧急联系人</view>
				<input type="text" placeholder="请输入紧急联系人" placeholder-style="font-size:28rpx;color:#dbdbdb" />
			</view>
			<view class="message-item">
				<view class="message-title">联系人电话</view>
				<input type="text" placeholder="请输入联系人电话" placeholder-style="font-size:28rpx;color:#dbdbdb" />
			</view>

		</view>
		<view class="message-bar">
			<view class="message-item">
				<view class="message-title">户籍类型</view>
				<radio-group @change="domicileChange" style="display: flex;">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;"
						v-for="item in domicile">
						<view>
							<radio :value="item.value" :key="item.id" :checked="item.value==residentData.domicileType"
								class="radio" activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">{{item.value}}</view>
					</label>

				</radio-group>
			</view>
			<view class="message-item">
				<view class="message-title">定点医疗单位</view>
				<input v-model="residentData.hospital" type="text" placeholder="请输入定点理疗单位"
					placeholder-style="font-size:28rpx;color:#dbdbdb" />
			</view>
			<view style="display:flex;">
				<view class="message-title" style="line-height: 88rpx;flex-shrink: 0;">费用类型</view>
				<radio-group @change="costChange" style="display: flex;flex-wrap: wrap;">
					<label class="uni-list-cell uni-list-cell-pd"
						style="display: flex;height: 88rpx;align-items: center;margin-right: 32rpx;flex-shrink: 0;"
						v-for="item in costType" :key="item.id">
						<view>
							<radio :value="item.value" :checked="residentData.costType==item.value" class="radio"
								activeBackgroundColor="#2984F8" color="#2984F8" />
						</view>
						<view class="messageInfo">{{item.value}}</view>
					</label>

				</radio-group>
			</view>
		</view>
	</view>
	<!-- 选择民族 -->
	<uni-popup ref="nationPopup" type="bottom" border-radius="10px 10px 0 0">
		<view class="pop-content">
			<view class="pop-title">选择民族 </view>
			<view class="pop-item" v-for="item in nation" :key="item._id" @click="chooseNation(item.value)">
				{{item.value}}
			</view>
			<view class="pop-floor" @click="closeNation">取消</view>
		</view>
	</uni-popup>
	<!-- 选择文化程度 -->
	<uni-popup ref="culturePopup" type="bottom" border-radius="10px 10px 0 0">
		<view class="pop-content">
			<view class="pop-title">选择文化程度 </view>
			<view class="pop-item" v-for="item in culture" :key="item._id" @click="chooseCulture(item.value)">
				{{item.value}}
			</view>
			<view class="pop-floor" @click="closeCulture">取消</view>
		</view>
	</uni-popup>
	<!-- 选择婚姻状况 -->
	<uni-popup ref="marryPopup" type="bottom" border-radius="10px 10px 0 0">
		<view class="pop-content">
			<view class="pop-title">选择婚姻状况 </view>
			<view class="pop-item" v-for="item in marry" :key="item._id" @click="chooseMarry(item.value)">
				{{item.value}}
			</view>
			<view class="pop-floor" @click="closeMarry">取消</view>
		</view>
	</uni-popup>





</template>

<script setup>
	import {
		ref,
		watch,
		onMounted,
	} from 'vue';
	import {
		useUserStore
	} from '../../store/user';
	import {
		upDateREsidentApi
	} from '../../api/home';
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app';

	const nationPopup = ref(null)
	const culturePopup = ref(null)
	const marryPopup = ref(null)

	// 民族
	const nation = ref([{
		id: 1,
		value: '汉族'
	}, {
		id: 2,
		value: '回族'
	}, {
		id: 3,
		value: '维吾尔族'
	}, {
		id: 4,
		value: '壮族'
	}, {
		id: 5,
		value: '其他少数民族'
	}, ])

	//文化程度
	const culture = ref([{
		id: 1,
		value: '小学'
	}, {
		id: 2,
		value: '初中'
	}, {
		id: 3,
		value: '高中/中专'
	}, {
		id: 4,
		value: '大专及以上'
	}, {
		id: 5,
		value: '其他'
	}, ])

	// 婚姻状况
	const marry = ref([{
		id: 1,
		value: '未婚'
	}, {
		id: 2,
		value: '已婚'
	}, {
		id: 3,
		value: '离异'
	}, {
		id: 4,
		value: '丧偶'
	}, {
		id: 5,
		value: '不详'
	}, ])




	// 打开民族选择
	function openNation() {
		nationPopup.value.open()
	}

	// 选择民族
	function chooseNation(data) {
		residentData.value.nation = data;
		nationPopup.value.close()
	}

	// 取消选择
	function closeNation() {
		nationPopup.value.close()
	}

	// 打开文化程度选择
	function openCulture() {
		culturePopup.value.open()
	}

	// 选择文化程度
	function chooseCulture(data) {
		residentData.value.culture = data;
		culturePopup.value.close()
	}

	// 取消选择
	function closeCulture() {
		culturePopup.value.close()
	}

	// 打开婚姻状况选择
	function openMarry() {
		marryPopup.value.open()
	}

	// 选择文化程度
	function chooseMarry(data) {
		residentData.value.maritalStatus = data;
		marryPopup.value.close()
	}

	// 取消选择
	function closeMarry() {
		marryPopup.value.close()
	}

	onMounted(() => {
		getresidentsDetail()
		// residentData.value = {
		// 	...userStore.userInfo
		// }
	})

	// 居民数据详情
	const residentId = ref('');
	const residentData = ref({})
	// watch(() => userStore, () => {
	// 	residentData.value = {
	// 		...userStore.userInfo
	// 	}
	// }, {
	// 	deep: true
	// })

	onLoad((options) => {
		// options 包含跳转时的 URL 参数
		residentId.value = options._id;
	});


	// 获取居民详情
	const getresidentsDetail = async () => {
		try {
			const res = await uni.request({
				url: 'http://nocat.life:3012/residents/detail',
				method: 'GET',
				data: {
					_id: residentId.value
				}
			})
			if (res.data.code === 200) {
				console.log('家庭成员数据:', res.data.data)
				residentData.value = res.data.data
			}
		} catch (error) {
			console.error('请求错误:', error)
			uni.showToast({
				title: '网络请求失败',
				icon: 'none'
			})
		}
	}

	onShow(() => {
		residentData.value = {
			...userStore.userInfo
		}
	})

	function costChange(e) {
		residentData.value.domicileType = e.detail.value
	}

	// 户籍类型
	const domicile = ref([{
		id: 1,
		value: '农村'
	}, {
		id: 2,
		value: '城镇'
	}, ])

	// 单选
	function domicileChange(e) {
		console.log(e);
		residentData.value.costType = e.detail.value
	}

	// export default {
	// 	methods: {
	// 		open() {
	// 			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
	// 			this.$refs.popup.open()
	// 		}
	// 	}
	// // }

	// 费用类型
	const costType = ref([{
		id: 1,
		value: '自费'
	}, {
		id: 2,
		value: '社会医疗保险'
	}, {
		id: 3,
		value: '商业保险'
	}, {
		id: 4,
		value: '新农合'
	}, {
		id: 5,
		value: '其他'
	}, ])

	const currentTab = ref(0);
	const userStore = useUserStore()



	// 头像回显
	function onChooseAvatar(e) {
		residentData.value.avatar = e.detail.avatarUrl

		uni.uploadFile({
			url: 'http://nocat.life:3012/images/upload',
			filePath: e.detail.avatarUrl,
			name: 'file',
		}).then(res => {
			const response = JSON.parse(res.data);
			if (response.code == 200) {
				residentData.value.avatar = response.data;
			}
		})
	}

	// 保存健康档案
	function updateResident() {
		console.log(111, residentData.value);

		// 判断使用哪个ID
		const idToUse = residentId.value || userStore.userInfo._id;

		upDateREsidentApi({
				...residentData.value,
				_id: idToUse // 使用动态ID
			})
			.then(res => {
				if (res.code == 200) {
					uni.showToast({
						title: '基础信息保存成功',
						duration: 3000
					});
					userStore.getUserInfo();
					// 保存成功后返回上一界面
					uni.navigateBack(); // 返回上一页
				} else {
					uni.showToast({
						title: res.message,
						duration: 3000,
						icon: 'error'
					})
				}
			})
	}
	defineExpose({
		updateResident
	})
</script>

<style scoped>
	.base-bar {
		background-color: #f6fafd;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.base-bar image {
		width: 148rpx;
		height: 148rpx;
		margin: 0 auto;
		margin: 32rpx auto;
		border-radius: 50%;
	}

	.message-bar {
		width: calc(750rpx - 64rpx);
		background-color: #fff;
		padding: 0 0 0 32rpx;
		margin-bottom: 16rpx;
	}

	.message-item {
		height: 88rpx;
		display: flex;
		align-items: center;
		border-bottom: 1px solid #e6e6e6;
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
	}

	.message-title {
		width: 175rpx;
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #999;
		font-weight: 400;
	}

	.messageInfo {
		height: 88rpx;
		line-height: 88rpx;
		font-size: 28rpx;
		color: #333;
		display: flex;
	}

	.message-item input {
		height: 50rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: 400;
	}

	.message-item input::placeholder {
		font-size: 128rpx;
		color: #dbdbdb;
		font-weight: 400;
	}

	.radio {
		width: 32rpx;
		height: 32rpx;
		margin-right: 24rpx;
	}

	.health-message {
		min-height: 100vh;
		background-color: #fff;
		width: 750rpx;
	}

	/* 弹出层 */

	.pop-content {
		width: 750rpx;
		border-radius: 20rpx;
		overflow: hidden;
		background-color: rgba(242, 242, 242, 1);
		;
	}

	.pop-title {
		height: 88rpx;
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #999;
		font-weight: 400;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
	}

	.pop-item {
		height: 112rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-top: 1px solid #dbdbdb;
		font-size: 32rpx;
		color: #1877F2;
		background-color: #fff;
	}

	.pop-floor {
		height: 174rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 24rpx;
		background-color: #fff;
		margin-top: 10rpx;
		color: #999;
	}

	.avatar-button {
		width: 148rpx;
		height: 148rpx;
		margin: 0 auto;
		margin: 32rpx auto;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
		padding: 0;
	}

	.avatar-button button {
		padding: 0;
		border: none;
	}

	.fix {
		font-size: 20rpx;
		color: red;
		margin-bottom: 32rpx;
		display: block;
		margin-left: 6rpx;
	}
</style>